<#include "header.html">

<div class="container">
    <div class="section">

        <div class="row">
            <div class="col s12 l9">

                <div class="card hoverable">



                    <ul class="collection">
                        <li class="collection-item ">

                            <a href="#"><img src="${thisUser.headUrl}" alt="${thisUser.name}" class="circle" height="100"></a>



                            <p><a href="#"><h5>${thisUser.name}</h5></a>  </p>



                            <p class="thin">柚子驿站 第 ${thisUser.id} 号会员</p>

                            <p class=""><a href="/followees/${thisUser.id}"><span>${followeeCount}</span> 正在关注</a> / <a href="/followers/${thisUser.id}"><span>${followerCount}</span>  个关注者</a></p>


                            <a href="javascript:$('#modal3').modal('open');" class="modal-trigger waves-effect waves-light btn-flat secondary-content"><i class="material-icons">email</i></a>


                            <#if followed??>
                                <a id="unfollow-btn-${thisUser.id}" href="javascript:$.post('/unfollow/user',{userId:${thisUser.id}}, function(data){console.log(data);$('#unfollow-btn-${thisUser.id}').hide();$('#follow-btn-${thisUser.id}').show();});" class="waves-effect waves-light btn"><span >取消关注</span></a>
                                <a style="display:none" id="follow-btn-${thisUser.id}" href="javascript:$.post('/follow/user',{userId:${thisUser.id}}, function(data){console.log(data);$('#follow-btn-${thisUser.id}').hide();$('#unfollow-btn-${thisUser.id}').show();});" class="waves-effect waves-light btn"><span >关注</span></a>

                            <#else>
                                <a id="follow-btn-${thisUser.id}" href="javascript:$.post('/follow/user',{userId:${thisUser.id}}, function(data){console.log(data);$('#follow-btn-${thisUser.id}').hide();$('#unfollow-btn-${thisUser.id}').show();});" class="waves-effect waves-light btn"><span >关注</span></a>
                                <a style="display:none" id="unfollow-btn-${thisUser.id}" href="javascript:$.post('/unfollow/user',{userId:${thisUser.id}}, function(data){console.log(data);$('#unfollow-btn-${thisUser.id}').hide();$('#follow-btn-${thisUser.id}').show();});" class="waves-effect waves-light btn"><span >取消关注</span></a>

                            </#if>





                        </li>


                    </ul>




                </div>




                <div class="card hoverable">

                    <div class="card-action">
                        <a>最新的帖子</a>

                    </div>

                    <ul class="collection">

                        <#list vos as vo>
                            <li class="collection-item ">
                                <span class="new badge blue" data-badge-caption="回复">${vo.post.commentCount}</span>
                                <span class="new badge red" data-badge-caption="赞">${vo.likeCount}</span>
                                <a href="/post/${vo.post.id}"><span class="title truncate">${vo.post.title}</span></a>
                                <p class="thin"><a href="#">${vo.user.name}</a>  •  创建于 ${vo.post.createdDate?datetime}
                                    <#if user?? && user.id == vo.post.userId>
                                    •
                                    <a href="javascript:$.post('/post/remove',{id:${vo.post.id}}, function(data){console.log(data);window.location.reload();});" class="modal-action modal-close waves-effect  "> 删除</a>
                                </#if>
                                </p>


                            </li>
                        </#list>


                    </ul>




                    <div class="card-content">
                        <!-- 分页 -->
                        <ul class="pagination center">
                            <#if prePId??>
                            <li class="waves-effect"><a href="/user/${thisUser.id}?pId=${prePId}"><i class="material-icons">chevron_left</i></a></li>
                        </#if>

                        <#if nextPId??>
                        <li class="waves-effect"><a href="/user/${thisUser.id}?pId=${nextPId}"><i class="material-icons">chevron_right</i></a></li>
                    </#if>
                        </ul>

                    </div>
                </div>
            </div>
        </div>

    </div>


    <!-- Modal Structure -->
    <div id="modal3" class="modal modal-fixed-footer">
        <div class="modal-content">



            <div class="row">
                <form id="msg-form" action="/msg/add" method="post" class="col s12">

                    <input type="hidden" id="to_id" name="to_id" value=${thisUser.id}>


                    <div class="row">
                        <div class="input-field col s12">
                            <textarea name="content" id="textarea1" class="materialize-textarea" length="1000"></textarea>
                            <label for="textarea1">内容</label>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="modal-footer">
            <a href="javascript:$('#msg-form').submit();" class="modal-action modal-close waves-effect btn  ">发送</a>
            <a href="#!" class="modal-action modal-close waves-effect btn-flat ">取消</a>
        </div>
    </div>


</div>


<#include "footer.html">